<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>SoulApp资源下载</title>
	<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" />
	<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" />
	<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<script src="./jquery.min.js?=3.4.1">

	</script>
	<script src="./jsUrlHelper.js">

	</script>
	<script>
		var fun = function (apiUrl) {
			var src = apiUrl + userId;
			$.ajax({
				type: "GET",
				url: src,
				dataType: "json",  //指定服务器返回的数据类型
			}).done(function (data) {
				if (data.data != null) {
					console.log(data.data.post.type);
					switch (data.data.post.type) {
						case 'IMAGE':
							showImage(data);
							break;
						case 'AUDIO':
							showAudio(data);
							break;
						case 'VIDEO':
							showVideo(data);
							break;
						case 'IMG_VDO_MIX':
							showImgVdoMix(data);
							break;
						default:
							alert("该瞬间不是媒体类型");
							console.log("无匹配类型");
					}
				} else {
					alert("该瞬间已被删除");
					console.log("error");
				}
			}).fail(function () {
				console.log("error");
			})

		}

		var showImgVdoMix = function (data) {
			var arraylength = data.data.post.attachments.length;
			var div = document.createElement('div');
			div.id = "imageVideoMix";
			for (i = 0; i < arraylength; i++) {
				var mediaType = data.data.post.attachments[i].type;
				switch (mediaType) {
					case 'IMAGE':
						console.log("图片" + data.data.post.attachments[i].fileUrl);
						var div1 = document.createElement('div');
						div1.id = "image" + i;
						div1.style.cssText = "padding: 2rem;";
						var a = document.createElement('a');
						a.href = data.data.post.attachments[i].fileUrl + "?attname=";
						var image = document.createElement('img');
						image.src = data.data.post.attachments[i].fileUrl;
						image.height = "800";
						image.style.cssText = "width: 100%; vertical-align: top; border-radius: 2rem";
						a.appendChild(image);
						div1.appendChild(a);
						div.appendChild(div1);
						break;
					case 'VIDEO':
						console.log("视频" + data.data.post.attachments[i].fileUrl);
						var video = document.createElement('video');
						video.controls = "controls";
						video.preload = "meta";
						video.style.cssText = "width: 100%; max-height: 800px;";
						video.src = data.data.post.attachments[i].fileUrl;
						div.appendChild(video);
						break;
					default:
						alert("该瞬间不是媒体类型");
						console.log("无匹配类型");
				}
			}
			document.getElementById('content').appendChild(div);
		}

		var showImage = function (data) {
			var p = document.createElement('p');//创建p节点
			p.innerHTML = "点击图片进行保存";//p节点显示的文字
			p.style.cssText = "margin-block-start: 1.5rem; margin-block-end: 0.1rem; color: #2187f3; font-size: 2.5rem; text-align: center;";
			document.getElementById('content').appendChild(p); //把p添加到页面中

			var arraylength = data.data.post.attachments.length;
			for (i = 0; i < arraylength; i++) {
				var div = document.createElement('div');
				div.id = "image" + i;
				div.style.cssText = "padding: 2rem;";
				var a = document.createElement('a');
				a.href = data.data.post.attachments[i].fileUrl + "?attname=";
				var image = document.createElement('img');
				image.src = data.data.post.attachments[i].fileUrl;
				image.height = "800";
				image.style.cssText = "width: 100%; vertical-align: top; border-radius: 2rem";
				a.appendChild(image);
				div.appendChild(a);
				document.getElementById('content').appendChild(div);
			}
		}
		var showAudio = function (data) {
			var audio = document.createElement('audio'); //生成一个audio元素 
			audio.controls = true; //这样控件才能显示出来 
			audio.src = data.data.post.attachments[0].fileUrl; //音乐的路径 
			audio.preload = "meta";
			document.getElementById('content').appendChild(audio); //把audio添加到页面中
		}
		var showVideo = function (data) {
			var video = document.createElement('video');
			video.controls = "controls";
			video.preload = "meta";
			video.style.cssText = "width: 100%; max-height: 800px;";
			video.src = data.data.post.attachments[0].fileUrl;
			document.getElementById('content').appendChild(video);
		}

		var userId;
		var apiUrl;
		var myfunction = function () {
			urlUid = document.getElementById("homePage").value;
			if(jsUrlHelper.getUrlParam(urlUid, "id") == ""){
				userId = jsUrlHelper.getUrlParam(urlUid, "postIdEcpt");
				apiUrl = "https://api.soulapp.cn/html/v3/post/detail?postIdEcpt=";
			} else {
				userId = jsUrlHelper.getUrlParam(urlUid, "id");
				apiUrl = "https://api.soulapp.cn/html/v2/post/detail?postId=";
			}
			document.getElementById('content').innerHTML = "";
			fun(apiUrl);
		}

		document.onkeydown = function (e) {
			var theEvent = window.event || e;
			var code = theEvent.keyCode || theEvent.which;
			if (code == 13) {
				$("#btn").click();
			}
		}
	</script>
</head>

<body background="http://www.w3school.com.cn/i/eg_bg_06.gif">
	<div>
		<span style="font-size: 1.5rem;">分享链接:</span>
		<input type="text" id="homePage" placeholder="输入网址" autofocus="autofocus"
			style="width: 30rem; height: 1.5rem; font-size: 1rem;" />
		<input type="button" id="btn" value="确定" onclick="myfunction()"
			style="width: 5rem;height: 2.5rem;line-height: 1.7rem;color: #ffffff;background: #257ad4;border-radius: 0.5rem;font-size: 1.3rem;text-align: center;" />
	</div>
	<div id="content"></div>
</body>

</html>